<template>
  <div class="analysis-visit">
    <section class="top">
      <div class="top-wrapper">
        <el-date-picker
          v-model="timeValue1"
          type="daterange"
          align="left"
          unlink-panels
          @change="handleTimeChange1"
          value-format="yyyy-MM-dd"
          range-separator="–"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions1"
          class='date-picker-input'>
        </el-date-picker>
      </div>
      <div v-if="false" class="info-wrapper">
        <div class="img"></div>
        <div class="info">
          <div style="font-size: 14px">{{pageInfo.wechat.name}}</div>
          <div class="info-icon">
            <div class="name-icon"></div>
            <div style="margin-left: 4px;font-size: 12px;color: #7F7F7F">{{pageInfo.wechat.type}}</div>
          </div>
        </div>
      </div>
    </section>
    <section class="middle">
      <div  @click="handleCardClick('addUserList')" class="card">
        <div>新增</div>
        <div class="number1">
          <count-num :countNum="pageInfo.addUser || 0"></count-num>
        </div>
        <div style="width: 100%;text-align: right;color: #7F7F7F;opacity: 0">环比10%↓3</div>
        <div class="card-border card-border1" :class="cardId === 'addUserList'? 'high' : ''"></div>
      </div>
      <div  @click="handleCardClick('reduceUserList')" class="card">
        <div>减少</div>
        <div class="number2">
          <count-num :countNum="pageInfo.reduceUser || 0"></count-num>
        </div>
        <div style="width: 100%;text-align: right;color: #7F7F7F;opacity: 0">环比10%↓3</div>
        <div class="card-border card-border2" :class="cardId === 'reduceUserList'? 'high' : ''"></div>
      </div>
      <div  @click="handleCardClick('userCountList')" class="card">
        <div>粉丝总数</div>
        <div class="number3">
          <count-num :countNum="pageInfo.countUser || 0"></count-num>
        </div>
        <div style="width: 100%;text-align: right;color: #7F7F7F;opacity: 0">环比10%↓3</div>
        <div class="card-border card-border3" :class="cardId === 'userCountList'? 'high' : ''"></div>
      </div>
      <div @click="handleCardClick('userSourceList')" class="card">
        <div>新用户来源</div>
        <div class="circle" ref="circle"></div>
        <div class="card-border card-border4" :class="cardId === 'userSourceList'? 'high' : ''"></div>
      </div>
    </section>
    <section class="bottom">
      <!-- <div v-if="cardId === 'addUserList' || cardId === 'userCountList'">
        <el-select v-model="valueOption" @change="handleOption" placeholder="请选择">
          <el-option
            v-for="item in optionsOne"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div v-else style="opacity: 0">
        <el-select v-model="valueOption" @change="handleOption" placeholder="请选择">
          <el-option
            v-for="item in optionsOne"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div> -->
      <div class='none-wechat-page-wrapper' v-show='isNoneWechat'>
        <div class='none-wechat-page'>
          <div class='none-wechat-title'>绑定公众号后，即可使用此功能</div>
          <div class='none-wechat-btn' @click='goBindWechat'>先去绑定公众号</div>
        </div>
      </div>
      <div class="chart-wrapper" v-show='!isNoneWechat'>
        <div ref="echart" class="e-chart"></div>
      </div>
    </section>
  </div>
</template>

<script>
import noneWechat from '@/public/none-wechat'
import countNum from 'public/countNum'
import Labels from 'public/label'
// import { getRefreshToken } from 'assets/server/axios.js'
const lineColorList = ['#83BEFF', '#FF90A9', '#FC713D', '#FFBA1D', '#38D6A0', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8', '#3496FF']
export default {
  components: {
    countNum,
    Labels,
    noneWechat
  },
  data () {
    return {
      countOptions: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      },
      pickerOptions1: {
        disabledDate (time) {
          return time.getTime() > Date.now() - 3600 * 1000 * 24
        },
        shortcuts: [{
          text: '昨天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
            picker.$emit('pick', [start, end])
          }
        },
        {
          text: '最近半个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 16)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            end.setTime(start.getTime() - 3600 * 1000 * 24)
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      lastDay: new Date().getTime() - 3600 * 1000 * 24,
      chart: null,
      chartCircle: null,
      timeValue1: '',
      dateType: 'datetime',
      // 高亮Id
      cardId: 'addUserList',
      // 选择的值
      valueOption: '',
      optionsOne: [
        {label: '全部', value: ''},
        {label: '公众号搜索', value: '1'},
        {label: '名片分享', value: '17'},
        {label: '扫描二维码', value: '30'},
        {label: '图文右上角菜单', value: '43'},
        {label: '支付后关注', value: '51'},
        {label: '图文页内公众号名称', value: '57'},
        {label: '公众号文章广告', value: '75'},
        {label: '朋友圈广告', value: '78'},
        {label: '其他', value: '0'}
      ],
      pageInfo: {
        addUser: 0,
        addUserList: [],
        countUser: 0,
        reduceUser: 0,
        reduceUserList: [],
        userCountList: [],
        userSourceList: []
      },
      loading: false,
      msgBox: null,
      isNoneWechat: false
    }
  },
  methods: {
    // countReady (instance, CountU) {
    //   const that = this
    //   instance.update(that.endVal + 100)
    // },
    // 时间戳转换判断是否需要加0
    add0 (m) {
      return m < 10 ? '0' + m : m
    },
    // 时间组件选择后请求数据，需要请求的日期加上后一天的日期两个参数
    handleTimeChange1 () {
      // let value1 = this.timeValue1
      // let tmp = new Date(this.timeValue1).getTime() + 3600 * 1000 * 24
      // let time = new Date(tmp)
      // let value2 = time.getFullYear() + '-' + this.add0(time.getMonth() + 1) + '-' + this.add0(time.getDate())
      // let needTime = []
      // needTime.push(value1, value2)
      this.getInfo(this.timeValue1)
    },
    // echart上方下拉框改变刷新数据
    handleOption () {
      this.getInfo()
    },
    // 上方四个卡片点击事件
    handleCardClick (index) {
      this.cardId = index
      this.init()
    },
    // 下方echarts初始化
    init () {
      if (!this.chart) {
        this.chart = window.echarts.init(this.$refs.echart)
      }
      let colorList = []
      if (this.cardId === 'addUserList') {
        colorList = ['#15C78A', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8', '#3496FF', '#83BEFF', '#FF90A9', '#FC713D', '#FFBA1D']
      } else if (this.cardId === 'reduceUserList') {
        colorList = ['#FA376C', '#FC713D', '#FFBA1D', '#38D6A0', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8', '#3496FF', '#83BEFF']
      } else if (this.cardId === 'userCountList') {
        colorList = ['#3496FF', '#83BEFF', '#FF90A9', '#FC713D', '#FFBA1D', '#38D6A0', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8']
      } else if (this.cardId === 'userSourceList') {
        colorList = ['#FFBA1D', '#38D6A0', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8', '#3496FF', '#83BEFF', '#FF90A9', '#FC713D']
      } else {
        colorList = lineColorList
      }
      let option = {
        color: colorList,
        minInterval: 1,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: this.pageInfo[this.cardId].legend ? this.pageInfo[this.cardId].legend : []
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '1%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {color: '#333'},
            data: this.pageInfo.refDateList ? this.pageInfo.refDateList : []
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {color: '#333'}
          }
        ],
        series: this.pageInfo[this.cardId].series
      }
      this.chart.setOption(option, { notMerge: true })
    },
    // // 第四卡片echarts初始化
    // initCircle () {
    //   this.chartCircle = window.echarts.init(this.$refs.circle)
    //   let option = {
    //     color: ['#FFBA1D', '#38D6A0', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8', '#3496FF', '#83BEFF', '#FF90A9', '#FC713D'],
    //     tooltip: {
    //       trigger: 'item',
    //       formatter: '{a} <br/>{b}: {c} ({d}%)'
    //     },
    //     series: [
    //       {
    //         name: '新用户来源',
    //         type: 'pie',
    //         radius: ['50%', '80%'],
    //         avoidLabelOverlap: false,
    //         label: {
    //           normal: {
    //             show: false,
    //             position: 'center'
    //           },
    //           emphasis: {
    //             show: true,
    //             textStyle: {
    //               fontSize: '10',
    //               fontWeight: 'bold'
    //             }
    //           }
    //         },
    //         labelLine: {
    //           normal: {
    //             show: false
    //           }
    //         },
    //         data: this.pageInfo.addUserList ? this.pageInfo.addUserList.series : []
    //       }
    //     ]
    //   }
    //   this.chartCircle.setOption(option)
    // },
    // 第四卡片echarts初始化
    initCircle () {
      if (!this.chartCircle) {
        this.chartCircle = window.echarts.init(this.$refs.circle)
      }
      let option = {
        color: ['#FFBA1D', '#38D6A0', '#7782FC', '#BB7FF7', '#93B742', '#4FE4E8', '#3496FF', '#83BEFF', '#FF90A9', '#FC713D'],
        grid: {
          left: 0, // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          top: 'middle',
          right: '12%',
          textStyle: {
            color: '#788288',
            fontSize: 13
          },
          icon: 'roundRect',
          data: [
            { name: '1', value: 10 },
            { name: '2', value: 10 },
            { name: '3', value: 10 },
            { name: '4', value: 10 },
            { name: '5', value: 10 }
          ]
        },
        series: [
          // 主要展示层的
          {
            radius: ['30%', '61%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: true,
                // formatter: '{c}%',
                textStyle: {
                  fontSize: 10
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 10,
                length2: 20
              },
              emphasis: {
                show: true
              }
            },
            name: '新用户来源',
            data: this.pageInfo.addUserList ? this.pageInfo.addUserList.series : []
          }, // 边框的设置
          {
            radius: ['30%', '34%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(250,250,250,0.3)'
                }
              }
            ]
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            center: ['50%', '50%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 9,
                name: '',
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#61bad3'
                  }
                }
              }
            ]
          }
        ]
      }
      this.chartCircle.setOption(option)
    },
    // 获取日期的区间
    getdiffdate (stime, etime) {
      // 初始化日期列表，数组
      var diffdate = []
      var i = 0
      // 开始日期小于等于结束日期,并循环
      while (stime <= etime) {
        diffdate[i] = stime
        // 获取开始日期时间戳
        var stimeTs = new Date(stime).getTime()
        // 增加一天时间戳后的日期
        var nextDate = stimeTs + (24 * 60 * 60 * 1000)
        // 拼接年月日，这里的月份会返回（0-11），所以要+1
        var nextDatesY = new Date(nextDate).getFullYear() + '-'
        var nextDatesM = (new Date(nextDate).getMonth() + 1 < 10) ? '0' + (new Date(nextDate).getMonth() + 1) + '-' : (new Date(nextDate).getMonth() + 1) + '-'
        var nextDatesD = (new Date(nextDate).getDate() < 10) ? '0' + new Date(nextDate).getDate() : new Date(nextDate).getDate()
        stime = nextDatesY + nextDatesM + nextDatesD
        // 增加数组key
        i++
      }
      return diffdate
    },
    handleData (time) {
      // 处理新增数据--------------------
      if (this.pageInfo.addUserList) {
        let tempAddUserList = JSON.parse(JSON.stringify(this.pageInfo.addUserList))
        let tempLegend = []
        let time0 = time && time.length ? time[0] : ''
        let time1 = time && time.length >= 2 ? time[1] : ''
        Array.isArray(this.pageInfo.addUserList) && this.pageInfo.addUserList.forEach(ele => {
          // if (ele.refDate) {
          //   temPrefDateList.push(ele.refDate.split(' ')[0])
          // }
          if (ele.sourceItem) {
            ele.sourceItem.forEach(eles => {
              if (tempLegend.indexOf(eles.userSource) === -1) {
                tempLegend.push(eles.userSource)
              }
            })
          }
        })
        this.pageInfo.addUserList = {}
        this.pageInfo.addUserList.legend = tempLegend && tempLegend.length ? tempLegend : ['新增总数']
        this.pageInfo.refDateList = this.getdiffdate(time0, time1)
        this.pageInfo.addUserList.series = []
        for (var i = 0; i < this.pageInfo.addUserList.legend.length; i++) {
          this.pageInfo.addUserList.series.push({name_en: this.pageInfo.addUserList.legend[i], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var is = 0; is < this.pageInfo.refDateList.length; is++) {
          this.pageInfo.addUserList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempAddUserList) && tempAddUserList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          if (ele.sourceItem) {
            ele.sourceItem.forEach(eles => {
              this.pageInfo.addUserList.series.forEach((eless, ind) => {
                if (eless.name_en === eles.userSource) {
                  this.pageInfo.addUserList.series[ind].data[index] = eles.userCount
                }
              })
            })
          }
        })
        this.pageInfo.addUserList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
          switch (ele.name_en) {
            case 0:
              this.pageInfo.addUserList.series[index].name = '其他合计'
              break
            case 1:
              this.pageInfo.addUserList.series[index].name = '公众号搜索'
              break
            case 17:
              this.pageInfo.addUserList.series[index].name = '名片分享'
              break
            case 30:
              this.pageInfo.addUserList.series[index].name = '扫描二维码'
              break
            case 43:
              this.pageInfo.addUserList.series[index].name = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.addUserList.series[index].name = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.addUserList.series[index].name = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.addUserList.series[index].name = '公众号文章广告'
              break
            case 78:
              this.pageInfo.addUserList.series[index].name = '朋友圈广告'
              break
          }
        })
        this.pageInfo.addUserList.legend.forEach((ele, index) => {
          switch (ele) {
            case 0:
              this.pageInfo.addUserList.legend[index] = '其他合计'
              break
            case 1:
              this.pageInfo.addUserList.legend[index] = '公众号搜索'
              break
            case 17:
              this.pageInfo.addUserList.legend[index] = '名片分享'
              break
            case 30:
              this.pageInfo.addUserList.legend[index] = '扫描二维码'
              break
            case 43:
              this.pageInfo.addUserList.legend[index] = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.addUserList.legend[index] = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.addUserList.legend[index] = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.addUserList.legend[index] = '公众号文章广告'
              break
            case 78:
              this.pageInfo.addUserList.legend[index] = '朋友圈广告'
              break
          }
        })
        this.init()
      }
      // 处理减少数据----------------------
      if (this.pageInfo.reduceUserList) {
        let tempReduceUserList = JSON.parse(JSON.stringify(this.pageInfo.reduceUserList))
        let tempLegend2 = []
        Array.isArray(this.pageInfo.reduceUserList) && this.pageInfo.reduceUserList.forEach(ele => {
          if (ele.sourceItem) {
            ele.sourceItem.forEach(eles => {
              if (tempLegend2.indexOf(eles.userSource) === -1) {
                tempLegend2.push(eles.userSource)
              }
            })
          }
        })
        this.pageInfo.reduceUserList = {}
        this.pageInfo.reduceUserList.legend = tempLegend2 && tempLegend2.length ? tempLegend2 : ['减少总数']
        this.pageInfo.reduceUserList.series = []
        for (var k = 0; k < this.pageInfo.reduceUserList.legend.length; k++) {
          this.pageInfo.reduceUserList.series.push({name_en: this.pageInfo.reduceUserList.legend[k], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var ks = 0; ks < this.pageInfo.refDateList.length; ks++) {
          this.pageInfo.reduceUserList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempReduceUserList) && tempReduceUserList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          if (ele.sourceItem) {
            ele.sourceItem.forEach(eles => {
              Array.isArray(this.pageInfo.reduceUserList.series) && this.pageInfo.reduceUserList.series.forEach((eless, ind) => {
                if (eless.name_en === eles.userSource) {
                  this.pageInfo.reduceUserList.series[ind].data[index] = eles.userCount
                }
              })
            })
          }
        })
        this.pageInfo.reduceUserList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
          switch (ele.name_en) {
            case 0:
              this.pageInfo.reduceUserList.series[index].name = '其他合计'
              break
            case 1:
              this.pageInfo.reduceUserList.series[index].name = '公众号搜索'
              break
            case 17:
              this.pageInfo.reduceUserList.series[index].name = '名片分享'
              break
            case 30:
              this.pageInfo.reduceUserList.series[index].name = '扫描二维码'
              break
            case 43:
              this.pageInfo.reduceUserList.series[index].name = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.reduceUserList.series[index].name = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.reduceUserList.series[index].name = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.reduceUserList.series[index].name = '公众号文章广告'
              break
            case 78:
              this.pageInfo.reduceUserList.series[index].name = '朋友圈广告'
              break
          }
        })
        this.pageInfo.reduceUserList.legend.forEach((ele, index) => {
          switch (ele) {
            case 0:
              this.pageInfo.reduceUserList.legend[index] = '其他合计'
              break
            case 1:
              this.pageInfo.reduceUserList.legend[index] = '公众号搜索'
              break
            case 17:
              this.pageInfo.reduceUserList.legend[index] = '名片分享'
              break
            case 30:
              this.pageInfo.reduceUserList.legend[index] = '扫描二维码'
              break
            case 43:
              this.pageInfo.reduceUserList.legend[index] = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.reduceUserList.legend[index] = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.reduceUserList.legend[index] = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.reduceUserList.legend[index] = '公众号文章广告'
              break
            case 78:
              this.pageInfo.reduceUserList.legend[index] = '朋友圈广告'
              break
          }
        })
      }
      // 处理粉丝总数数据----------------------
      if (this.pageInfo.userCountList) {
        let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.userCountList))
        this.pageInfo.userCountList = {}
        this.pageInfo.userCountList.legend = ['粉丝总数']
        this.pageInfo.userCountList.series = []
        for (var j = 0; j < this.pageInfo.userCountList.legend.length; j++) {
          this.pageInfo.userCountList.series.push({name_en: this.pageInfo.userCountList.legend[j], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var js = 0; js < this.pageInfo.refDateList.length; js++) {
          this.pageInfo.userCountList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserCountList) && tempUserCountList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          this.pageInfo.userCountList.series.forEach((eless, ind) => {
            this.pageInfo.userCountList.series[ind].data[index] = ele.userCount
          })
        })
        this.pageInfo.userCountList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
          ele.name = ele.name_en
          ele.name_en = 0
        })
        this.pageInfo.userCountList.legend.forEach((ele, index) => {
          switch (ele) {
            case 0:
              this.pageInfo.userCountList.legend[index] = '其他合计'
              break
            case 1:
              this.pageInfo.userCountList.legend[index] = '公众号搜索'
              break
            case 17:
              this.pageInfo.userCountList.legend[index] = '名片分享'
              break
            case 30:
              this.pageInfo.userCountList.legend[index] = '扫描二维码'
              break
            case 43:
              this.pageInfo.userCountList.legend[index] = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.userCountList.legend[index] = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.userCountList.legend[index] = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.userCountList.legend[index] = '公众号文章广告'
              break
            case 78:
              this.pageInfo.userCountList.legend[index] = '朋友圈广告'
              break
          }
        })
      }
      // 处理新用户来源数据----------------------
      if (this.pageInfo.userSourceList) {
        let tempUserSourceList = JSON.parse(JSON.stringify(this.pageInfo.userSourceList))
        let tempLegend4 = []
        Array.isArray(this.pageInfo.userSourceList) && this.pageInfo.userSourceList.forEach(ele => {
          if (ele.sourceItem) {
            ele.sourceItem.forEach(eles => {
              if (tempLegend4.indexOf(eles.userSource) === -1) {
                tempLegend4.push(eles.userSource)
              }
            })
          }
        })
        console.log('tempLegend4', tempLegend4)
        this.pageInfo.userSourceList = {}
        this.pageInfo.userSourceList.legend = tempLegend4 && tempLegend4.length ? tempLegend4 : ['新用户来源']
        this.pageInfo.userSourceList.series = []
        for (var d = 0; d < this.pageInfo.userSourceList.legend.length; d++) {
          this.pageInfo.userSourceList.series.push({name_en: this.pageInfo.userSourceList.legend[d], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        }
        for (var ds = 0; ds < this.pageInfo.refDateList.length; ds++) {
          this.pageInfo.userSourceList.series.forEach(ele => {
            ele.data.push(0)
          })
        }
        let index = 0
        Array.isArray(tempUserSourceList) && tempUserSourceList.forEach(ele => {
          if (ele.refDate) {
            index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
          }
          if (ele.sourceItem) {
            ele.sourceItem.forEach(eles => {
              this.pageInfo.userSourceList.series.forEach((eless, ind) => {
                if (eless.name_en === eles.userSource) {
                  this.pageInfo.userSourceList.series[ind].data[index] = eles.userCount
                }
              })
            })
          }
        })
        this.pageInfo.userSourceList.series.forEach((ele, index) => {
          let sum = 0
          ele.data.forEach(eles => {
            sum += eles
          })
          ele.value = sum
          switch (ele.name_en) {
            case 0:
              this.pageInfo.userSourceList.series[index].name = '其他合计'
              break
            case 1:
              this.pageInfo.userSourceList.series[index].name = '公众号搜索'
              break
            case 17:
              this.pageInfo.userSourceList.series[index].name = '名片分享'
              break
            case 30:
              this.pageInfo.userSourceList.series[index].name = '扫描二维码'
              break
            case 43:
              this.pageInfo.userSourceList.series[index].name = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.userSourceList.series[index].name = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.userSourceList.series[index].name = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.userSourceList.series[index].name = '公众号文章广告'
              break
            case 78:
              this.pageInfo.userSourceList.series[index].name = '朋友圈广告'
              break
          }
        })
        this.pageInfo.userSourceList.legend.forEach((ele, index) => {
          switch (ele) {
            case 0:
              this.pageInfo.userSourceList.legend[index] = '其他合计'
              break
            case 1:
              this.pageInfo.userSourceList.legend[index] = '公众号搜索'
              break
            case 17:
              this.pageInfo.userSourceList.legend[index] = '名片分享'
              break
            case 30:
              this.pageInfo.userSourceList.legend[index] = '扫描二维码'
              break
            case 43:
              this.pageInfo.userSourceList.legend[index] = '图文页右上角菜单'
              break
            case 51:
              this.pageInfo.userSourceList.legend[index] = '支付后关注（在支付完成页）'
              break
            case 57:
              this.pageInfo.userSourceList.legend[index] = '图文页内公众号名称'
              break
            case 75:
              this.pageInfo.userSourceList.legend[index] = '公众号文章广告'
              break
            case 78:
              this.pageInfo.userSourceList.legend[index] = '朋友圈广告'
              break
          }
        })
        console.log('this.pageInfo.userSourceList: ', this.pageInfo.userSourceList)
      }
    },
    goBindWechat () {
      this.linkTo({ name: 'wechatGuide' })
      this.msgBox && this.msgBox.close()
    },
    // 页面初始化请求数据
    getInfo (time) {
      let wechatId = sessionStorage.getItem('wechatId')
      this.loading = false
      time = time || []
      if (!wechatId) {
        this.$nextTick(() => {
          this.initCircle()
          this.init()
          this.handleData()
        })
        this.msgBox = this.$message({
          dangerouslyUseHTMLString: true,
          message: '当前账户暂无公众号信息 <span id="bindWechatRef" style="text-decoration:underline; color:#409eff; margin:0 20px 0 10px; cursor: pointer;">去绑定</span>',
          type: 'warning',
          showClose: true,
          duration: 0
        })
        // 提示绑定公众号点击事件注册
        document.querySelector('#bindWechatRef').onclick = () => {
          this.linkTo({ name: 'wechatGuide' })
        }
        this.isNoneWechat = true
        return false
      }
      let appid = sessionStorage.getItem('appid')
      let url = `${this.SERVICE_WECHAT}/analyze/${appid}/grow`
      let param = {
        wechatId: sessionStorage.getItem('wechatId'),
        startTime: time.length ? time[0] : '',
        endTime: time[1] || ''
      }
      this.get(url, param).then(rsp => {
        this.loading = false
        let data = rsp.data.data
        if (data) {
          this.pageInfo = data
        } else {
          this.pageInfo = {
            addUser: 0,
            addUserList: [],
            countUser: 0,
            reduceUser: 0,
            reduceUserList: [],
            userCountList: [],
            userSourceList: []
          }
        }
        this.handleData(time)
        // // 处理新增数据--------------------
        // if (this.pageInfo.addUserList) {
        //   let tempAddUserList = JSON.parse(JSON.stringify(this.pageInfo.addUserList))
        //   let tempLegend = []
        //   this.pageInfo.addUserList.forEach(ele => {
        //     // if (ele.refDate) {
        //     //   temPrefDateList.push(ele.refDate.split(' ')[0])
        //     // }
        //     if (ele.sourceItem) {
        //       ele.sourceItem.forEach(eles => {
        //         if (tempLegend.indexOf(eles.userSource) === -1) {
        //           tempLegend.push(eles.userSource)
        //         }
        //       })
        //     }
        //   })
        //   this.pageInfo.addUserList = {}
        //   this.pageInfo.addUserList.legend = tempLegend
        //   this.pageInfo.refDateList = this.getdiffdate(time[0] || '', time[1] || '')
        //   this.pageInfo.addUserList.series = []
        //   for (var i = 0; i < this.pageInfo.addUserList.legend.length; i++) {
        //     this.pageInfo.addUserList.series.push({name_en: this.pageInfo.addUserList.legend[i], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var is = 0; is < this.pageInfo.refDateList.length; is++) {
        //     this.pageInfo.addUserList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempAddUserList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     if (ele.sourceItem) {
        //       ele.sourceItem.forEach(eles => {
        //         this.pageInfo.addUserList.series.forEach((eless, ind) => {
        //           if (eless.name_en === eles.userSource) {
        //             this.pageInfo.addUserList.series[ind].data[index] = eles.userCount
        //           }
        //         })
        //       })
        //     }
        //   })
        //   this.pageInfo.addUserList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //     switch (ele.name_en) {
        //       case 0:
        //         this.pageInfo.addUserList.series[index].name = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.addUserList.series[index].name = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.addUserList.series[index].name = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.addUserList.series[index].name = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.addUserList.series[index].name = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.addUserList.series[index].name = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.addUserList.series[index].name = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.addUserList.series[index].name = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.addUserList.series[index].name = '朋友圈广告'
        //         break
        //     }
        //   })
        //   this.pageInfo.addUserList.legend.forEach((ele, index) => {
        //     switch (ele) {
        //       case 0:
        //         this.pageInfo.addUserList.legend[index] = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.addUserList.legend[index] = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.addUserList.legend[index] = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.addUserList.legend[index] = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.addUserList.legend[index] = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.addUserList.legend[index] = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.addUserList.legend[index] = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.addUserList.legend[index] = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.addUserList.legend[index] = '朋友圈广告'
        //         break
        //     }
        //   })
        // }
        // // 处理减少数据----------------------
        // if (this.pageInfo.reduceUserList) {
        //   let tempReduceUserList = JSON.parse(JSON.stringify(this.pageInfo.reduceUserList))
        //   let tempLegend2 = []
        //   this.pageInfo.reduceUserList.forEach(ele => {
        //     if (ele.sourceItem) {
        //       ele.sourceItem.forEach(eles => {
        //         if (tempLegend2.indexOf(eles.userSource) === -1) {
        //           tempLegend2.push(eles.userSource)
        //         }
        //       })
        //     }
        //   })
        //   this.pageInfo.reduceUserList = {}
        //   this.pageInfo.reduceUserList.legend = tempLegend2
        //   this.pageInfo.reduceUserList.series = []
        //   for (var k = 0; k < this.pageInfo.reduceUserList.legend.length; k++) {
        //     this.pageInfo.reduceUserList.series.push({name_en: this.pageInfo.reduceUserList.legend[k], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var ks = 0; ks < this.pageInfo.refDateList.length; ks++) {
        //     this.pageInfo.reduceUserList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempReduceUserList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     if (ele.sourceItem) {
        //       ele.sourceItem.forEach(eles => {
        //         this.pageInfo.reduceUserList.series.forEach((eless, ind) => {
        //           if (eless.name_en === eles.userSource) {
        //             this.pageInfo.reduceUserList.series[ind].data[index] = eles.userCount
        //           }
        //         })
        //       })
        //     }
        //   })
        //   this.pageInfo.reduceUserList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //     switch (ele.name_en) {
        //       case 0:
        //         this.pageInfo.reduceUserList.series[index].name = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.reduceUserList.series[index].name = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.reduceUserList.series[index].name = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.reduceUserList.series[index].name = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.reduceUserList.series[index].name = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.reduceUserList.series[index].name = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.reduceUserList.series[index].name = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.reduceUserList.series[index].name = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.reduceUserList.series[index].name = '朋友圈广告'
        //         break
        //     }
        //   })
        //   this.pageInfo.reduceUserList.legend.forEach((ele, index) => {
        //     switch (ele) {
        //       case 0:
        //         this.pageInfo.reduceUserList.legend[index] = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.reduceUserList.legend[index] = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.reduceUserList.legend[index] = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.reduceUserList.legend[index] = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.reduceUserList.legend[index] = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.reduceUserList.legend[index] = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.reduceUserList.legend[index] = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.reduceUserList.legend[index] = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.reduceUserList.legend[index] = '朋友圈广告'
        //         break
        //     }
        //   })
        // }
        // // 处理粉丝总数数据----------------------
        // if (this.pageInfo.userCountList) {
        //   let tempUserCountList = JSON.parse(JSON.stringify(this.pageInfo.userCountList))
        //   this.pageInfo.userCountList = {}
        //   this.pageInfo.userCountList.legend = ['粉丝总数']
        //   this.pageInfo.userCountList.series = []
        //   for (var j = 0; j < this.pageInfo.userCountList.legend.length; j++) {
        //     this.pageInfo.userCountList.series.push({name_en: this.pageInfo.userCountList.legend[j], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var js = 0; js < this.pageInfo.refDateList.length; js++) {
        //     this.pageInfo.userCountList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserCountList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     this.pageInfo.userCountList.series.forEach((eless, ind) => {
        //       this.pageInfo.userCountList.series[ind].data[index] = ele.userCount
        //     })
        //   })
        //   this.pageInfo.userCountList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //     ele.name = ele.name_en
        //     ele.name_en = 0
        //   })
        //   this.pageInfo.userCountList.legend.forEach((ele, index) => {
        //     switch (ele) {
        //       case 0:
        //         this.pageInfo.userCountList.legend[index] = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.userCountList.legend[index] = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.userCountList.legend[index] = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.userCountList.legend[index] = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.userCountList.legend[index] = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.userCountList.legend[index] = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.userCountList.legend[index] = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.userCountList.legend[index] = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.userCountList.legend[index] = '朋友圈广告'
        //         break
        //     }
        //   })
        // }
        // // 处理新用户来源数据----------------------
        // if (this.pageInfo.userSourceList) {
        //   let tempUserSourceList = JSON.parse(JSON.stringify(this.pageInfo.userSourceList))
        //   let tempLegend4 = []
        //   this.pageInfo.userSourceList.forEach(ele => {
        //     if (ele.sourceItem) {
        //       ele.sourceItem.forEach(eles => {
        //         if (tempLegend4.indexOf(eles.userSource) === -1) {
        //           tempLegend4.push(eles.userSource)
        //         }
        //       })
        //     }
        //   })
        //   this.pageInfo.userSourceList = {}
        //   this.pageInfo.userSourceList.legend = tempLegend4
        //   this.pageInfo.userSourceList.series = []
        //   for (var d = 0; d < this.pageInfo.userSourceList.legend.length; d++) {
        //     this.pageInfo.userSourceList.series.push({name_en: this.pageInfo.userSourceList.legend[d], value: 0, stack: '总量', areaStyle: {}, data: [], type: 'line', smooth: true})
        //   }
        //   for (var ds = 0; ds < this.pageInfo.refDateList.length; ds++) {
        //     this.pageInfo.userSourceList.series.forEach(ele => {
        //       ele.data.push(0)
        //     })
        //   }
        //   let index = 0
        //   tempUserSourceList.forEach(ele => {
        //     if (ele.refDate) {
        //       index = this.pageInfo.refDateList.indexOf(ele.refDate.split(' ')[0])
        //     }
        //     if (ele.sourceItem) {
        //       ele.sourceItem.forEach(eles => {
        //         this.pageInfo.userSourceList.series.forEach((eless, ind) => {
        //           if (eless.name_en === eles.userSource) {
        //             this.pageInfo.userSourceList.series[ind].data[index] = eles.userCount
        //           }
        //         })
        //       })
        //     }
        //   })
        //   this.pageInfo.userSourceList.series.forEach((ele, index) => {
        //     let sum = 0
        //     ele.data.forEach(eles => {
        //       sum += eles
        //     })
        //     ele.value = sum
        //     switch (ele.name_en) {
        //       case 0:
        //         this.pageInfo.userSourceList.series[index].name = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.userSourceList.series[index].name = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.userSourceList.series[index].name = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.userSourceList.series[index].name = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.userSourceList.series[index].name = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.userSourceList.series[index].name = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.userSourceList.series[index].name = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.userSourceList.series[index].name = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.userSourceList.series[index].name = '朋友圈广告'
        //         break
        //     }
        //   })
        //   this.pageInfo.userSourceList.legend.forEach((ele, index) => {
        //     switch (ele) {
        //       case 0:
        //         this.pageInfo.userSourceList.legend[index] = '其他合计'
        //         break
        //       case 1:
        //         this.pageInfo.userSourceList.legend[index] = '公众号搜索'
        //         break
        //       case 17:
        //         this.pageInfo.userSourceList.legend[index] = '名片分享'
        //         break
        //       case 30:
        //         this.pageInfo.userSourceList.legend[index] = '扫描二维码'
        //         break
        //       case 43:
        //         this.pageInfo.userSourceList.legend[index] = '图文页右上角菜单'
        //         break
        //       case 51:
        //         this.pageInfo.userSourceList.legend[index] = '支付后关注（在支付完成页）'
        //         break
        //       case 57:
        //         this.pageInfo.userSourceList.legend[index] = '图文页内公众号名称'
        //         break
        //       case 75:
        //         this.pageInfo.userSourceList.legend[index] = '公众号文章广告'
        //         break
        //       case 78:
        //         this.pageInfo.userSourceList.legend[index] = '朋友圈广告'
        //         break
        //     }
        //   })
        // }
        if (rsp.data.length === 0) {
          this.showErrMsg('当前查询的日期或条件没有符合的数据~')
        } else {
          this.$nextTick(() => {
            this.init()
            this.initCircle()
          })
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    initTime () {
    // 时间进页面默认为昨天
      let date = new Date().getTime() - 3600 * 1000 * 24
      date = new Date(date)
      let tmp = new Date().getTime() - 3600 * 1000 * 24 * 31
      let time = new Date(tmp)
      let todayTime = time.getFullYear() + '-' + this.add0(date.getMonth() + 1) + '-' + this.add0(date.getDate())
      let lastTime = time.getFullYear() + '-' + this.add0(time.getMonth() + 1) + '-' + this.add0(time.getDate())
      this.timeValue1 = []
      this.timeValue1.push(lastTime, todayTime)
    },
    closeMsg () {
      if (this.msgBox) {
        this.msgBox.close()
      }
    }
  },
  created () {
    this.loading = true
    this.initTime()
    // 应该等获取公众号列表信息之后再调用该函数
    this.getInfo(this.timeValue1)
  },
  mounted () {
    this.$nextTick(() => {
      window.onresize = () => {
        if (this.chart) {
          this.chart.resize()
        }
      }
    })
  },
  beforeDestroy () {
    this.closeMsg()
    window.onresize = null
  }
}
</script>

<style lang="stylus" scoped>
.analysis-visit
  border-radius 6px
  display flex
  flex-direction column
  padded_box(border-box, 0, 10px, 10px, 10px)
  // scroll()
  background-color #fafafa
  border-radius 6px
  min-height 600px
  height 100%
  .top
    between()
    align-items center
    background #fff
    padding 10px
    border-radius 10px
    // box-shadow 0 3px 12px 0 rgba(223,234,239,.7);
    .top-wrapper
      display flex
      align-items center
    .info-wrapper
      display flex
      .img
        margin-right 10px
        width 40px
        height 40px
        bgI()
        // background-color #000
        border-radius 50%
      .info
        columnBetween()
        .info-icon
          display flex
          align-items center
        .name-icon
          display inline-block
          margin-left 4px
          width 14px
          height 14px
          background-image url('~assets/img/doctor.png')
          bgI()
  .middle
    margin-top 10px
    display flex
    justify-content space-between
    // padding 10px
    // background #fff
    border-radius 10px
    .card
      flex 1
      margin-right 10px
      position relative
      padded_box(border-box, 12px 24px)
      columnBetween()
      align-items center
      // width 23%
      height 156px
      box-shadow 0 3px 12px 0 rgba(223,234,239,.7);
      font-size 14px
      cursor pointer
      transition all ease 0.2s
      background #fff
      border-radius 10px
      &:last-child
        margin-right 0
      .card-border
        position absolute
        left 0
        bottom 0
        width 100%
        height 8px
        opacity 0.2
        border-radius 0 0 10px 10px
      .high
        opacity 1
      .number1
        font-size 50px
        color #15C78A
      .card-border1
        background-color #15C78A
      .number2
        font-size 50px
        color #FA376C
      .card-border2
        background-color #FA376C
      .number3
        font-size 50px
        color #3496FF
      .card-border3
        background-color #3496FF
      .number4
        color #3496FF
        font-size 50px
      .card-border4
        background-color #FFBA1D
      .circle
        width 100%
        height 200px
    .card:hover
      box-shadow 0px 2px 18px rgba(0, 0, 0, .1)
  .bottom
    flex 1
    padded_box(border-box, 0 22px 43px)
    margin-top 10px
    width 100%
    height 0
    box-shadow 0 3px 12px 0 rgba(223,234,239,.7);
    background #fff
    border-radius 10px
    .chart-wrapper
      margin-top 27px
      width 100%
      height 100%
      center()
      .e-chart
        width 100%
        height 100%
    .none-wechat-page-wrapper
      box-sizing border-box
      padding 10px
      display flex
      flex-direction column
      justify-content center
      border-radius 6px
      height 100%
      .none-wechat-page
        position relative
        background #ffffff
        border-radius 6px
        box-sizing border-box
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center
        .none-wechat-title
          width 300px
          font-size 14px
          font-weight 500
          text-align center
          line-height 24px
          margin-bottom 10px
        .none-wechat-btn
          width 160px
          line-height 40px
          background #409eff
          border-radius 6px
          color #ffffff
          font-size 14px
          text-align center
          cursor pointer
</style>
